export default {
  data() {
    return { count: 0 ,
        msg: "this is a demo",
        author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }

    }

  },


  template: `
<div id="countdiv">count is {{ count }},{{ msg }}</div>
<button @click="increment">click me -> {{ count }}</button>
<p>Has published 5 books:</p>
<span>{{ publishedBooksMessage }}</span>
<li v-for="book in author.books">
  {{ book }}
</li>
`,
  methods: {
    increment() {
      this.count++;
      this.author.books.push("add new book:"+this.count);

    },
    calculateBooksMessage() {
      console.log(">>> calculateBooksMessage");
      return this.author.books.length > 5 ? 'Yes' : 'No'
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      console.log("--- onPublishedBooksMessage")
      return this.calculateBooksMessage() ;
    }
  },
  mounted() {
    // `this` 指向当前组件实例
    console.log("on mounted "+this.count) // => 1
    // 数据属性也可以被更改
    this.increment();
  }
}